<script setup>
import {defineProps} from 'vue'
const props = defineProps({
  data: {
    type: Array,
    default: []
  }
})
</script>

<template>
  <el-table :data="props.data" style="width: 100%;height: 360px">
    <el-table-column prop="index" label="排名" width="60" />
    <el-table-column prop="title" label="标题">
      <template #default="scope">
        <a class="one-line" :title="scope.row.title" :href="scope.row.url" target="_blank">{{scope.row.title}}</a>
      </template>
    </el-table-column>
    <el-table-column prop="hot" label="热度" width="100" />
  </el-table>
</template>

<style lang="less" scoped>
.one-line {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  word-break: normal;
}
</style>